<template>
	<view class="navigation flex m-t20">
		<scroll-view scroll-x="true" :show-scrollbar="false">
			<view class="flex p-h24">
				<view
					class="card flex-d-c m-r40"
					v-for="(item,index) in links"
					:key="index"
					:data-url="item.link"
					@click="goto">
					<view class="icon-view flex-c">
						<image class="square-54" :src="`/static/images/home/icon-${index+1}.png`"></image>
					</view>
					<text class="m-t20 text-500-126 no-wrap">{{ item.lable }}</text>
				</view>

				<view class="fill"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive } from 'vue'
	import { useNavigator } from '@/hooks/use-navigator'
	
	const { goto } = useNavigator()

	const links = reactive([
		{
			icon: '',
			lable: '找工作',
			link: '/pages/dasdas',
		},
		{
			icon: '',
			lable: '招人才',
			link: '/pages/dasdas',
		},
		{
			icon: '',
			lable: '企业库',
			link: '/pages/dasdas',
		},
		{
			icon: '',
			lable: '政策资讯',
			link: '/pages/dasdas',
		},
		{
			icon: '',
			lable: '招聘会',
			link: '/pages/dasdas',
		},
		{
			icon: '',
			lable: '技能培训',
			link: '/pages/dasdas',
		},
	])
</script>

<style lang="scss" scoped>
	.navigation {
		width: 100%;
		height: 220rpx;
		border-radius: 20rpx;
		background-color: $bg-color-1;
	}

	.icon-view {
		width: 90rpx;
		height: 90rpx;
		border-radius: 20rpx;
		background-color: $bg-color-4;
	}

	.card {
		&:nth-child(6) {
			margin-right: 0;
		}
	}

	.fill {
		flex-shrink: 0;
		width: 24rpx;
		height: 24rpx;
	}
</style>